<template>
  <div class="client-append-form">
    <!-- label 和 input 5/12 均分位置 -->
    <a-form :form="form" @submit="handleSubmit" autoComplete="off">
      <a-form-item label="客户名称">
        <a-input
          v-decorator="['name',
            { rules: [
              { required: true, message: '客户名称必须输入' },
              { min: 4, message: '请输入至少4个字符'},
              { max: 20, message: '最多只能输入20个字母'}
            ]}
          ]"
          placeholder="客户名称，4到20个字符"
        />
      </a-form-item>
      <a-form-item label="客户ID">
        <a-input
          v-decorator="['id', { rules: [{ required: true, message: '请勿删除客户ID' }, {type: 'enum', enum: [getClientId()], message: '请勿修改客户ID'}], initialValue: getClientId()}]" 
          placeholder="客户ID，形如 GM0001，两个大写字母 + 4位数字，不应与以前的任何客户ID重复"
          disabled
        />
      </a-form-item>
      <a-form-item label="地址">
        <a-input
          v-decorator="['address', {initialValue: ''}]" placeholder="客户地址"
        />
      </a-form-item>
      <a-form-item label="电话">
        <a-input
          v-decorator="['phone', {initialValue: ''}]" placeholder="客户电话"
        />
      </a-form-item>
      <div class="operations">
        <a-form-item class="operation">
          <a-button type="primary" html-type="submit">
            提交
          </a-button>
        </a-form-item>
        <a-form-item class="operation">
           <a-popconfirm
            :title="`确认删除客户`"
            ok-text="Yes"
            cancel-text="No"
            @confirm="deleteClient()"
          >
            <a-button type="danger">
              删除
            </a-button>
          </a-popconfirm>
        </a-form-item>
        <a-form-item class="operation">
          <a-button @click="handleCancel">
            取消
          </a-button>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>

<script>
import {
  clientCheckReq,
  clientUpdateReq,
  clientDelReq
} from "@/requests/clientRequests";

export default {
  name: "ClientCheckForm",
  props: {

  },
  data() {
    return {
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'clientCheck' }),
      id: this.$route.params.id
    };
  },
  computed: {

  },
  mounted() {
    const id = this.id;
    const loaded = this.$message.loading('正在加载用户数据', 0);
    clientCheckReq(id).then((res) => {
      loaded();
      const client = res.data;
      this.form.setFieldsValue({
        ['name']: client.name,
        ['id']: client.id,
        ['address']: client.address,
        ['phone']: client.phone
      })
    }).catch((err) => {
      loaded();
      this.$notification['error']({
        message: '修改客户',
        description:
          `获取客户失败，错误提示 ${err.response.data.message}`,
      });
    });
  },
  watch: {

  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      const loaded = this.$message.loading('正在修改用户数据，请勿重复点击', 0);
      this.form.validateFields((err, values) => {
        if (!err) {
          // 这里填写请求后端修改数据
          clientUpdateReq(this.id, values).then((res) => {
            loaded();
            // 如果成功，应当得到一个客户Id。
            const clientId = res.data.id;
            // 由于无法直接刷新页面，所以需要首先回退到客户主页
            this.$router.push({
              name: 'ClientIndex',
            });

            // 弹出修改客户信息成功的提示框
            this.$notification['success']({
              message: '修改客户',
              description:
                `修改客户信息成功，客户ID ${clientId}`,
            });
            this.$store.commit('updateClientsCache');
          }).catch((err) => {
            loaded();
            this.$notification['error']({
              message: '修改客户',
              description:
                `修改客户失败，失败信息 ${err.response}`,
            });
          });
        }
      });
    },
    deleteClient() {
      // 这里填写请求后端删除客户
      const loaded = this.$message.loading('正在删除用户，请勿重复点击', 0);
      clientDelReq(this.id).then((res) => {
        loaded();
        // 如果成功，啥东西都不返回。

        // 由于无法直接刷新页面，所以需要首先回退到客户主页
        this.$router.push({
          name: 'ClientIndex',
        });
        // 弹出修改客户信息成功的提示框
        const id = this.id;
        this.$notification['success']({
          message: '修改客户',
          description:
            `删除客户信息成功，被删除的客户ID ${id}`,
        });

        this.$store.commit('updateClientsCache');
      }).catch((err) => {
        loaded();
        this.$notification['error']({
          message: '修改客户',
          description:
            `删除客户失败，失败信息 ${err.response.data.message}`,
        });
      });

    },
    getClientId() {
      return this.$route.params.id;
    },
    handleCancel() {
      this.$message.info('撤销修改用户');
      this.$router.push({
        name: 'ClientIndex'
      });
      // 通知父组件抛弃本页面
      this.$emit('handleCancel');
    }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.client-append-form {
  .ant-form {

    display: flex;
    flex-direction: column;
    padding: 0 100px;
    .ant-form-item:not(.operation) {
      display: grid;
      grid-template-columns: 0 100px 500px 0;
    }

    .operations {
      display: grid;
      grid-template-columns: 369px 84px 84px 84px;
      .operation:first-child {
        grid-column: 2 / 3;
      }
    }
  }


  

}
</style>
